<template>
    <div :style="`width: ${groupSize}px;transform: rotate(${groupDirection}deg);`">
        <div class="main" :style="{ '--single-width': singleSize + 'px' }">
            <div class="single" :style="getSytleStr(270, leftColor)" @click="changeColor(0)"></div>
            <div class="single" :style="getSytleStr(0, centerColor)" @click="changeColor(1)"></div>
            <div class="single" :style="getSytleStr(90, rightColor)" @click="changeColor(2)"></div>
        </div>
    </div>
</template>

<script setup name="signalLight">
import { ref } from 'vue'
const { groupSize, leftColor, centerColor, rightColor, singleSize } = defineProps(["singleSize", "groupSize", "groupDirection", "leftColor", "centerColor", "rightColor"]);
const t = ref(90)
const getSytleStr = (singleDeg, bgc) => {
    return `transform: rotate(${singleDeg}deg);background-color:${bgc};`;
}
function changeColor(num){
    let color = ''
    if(num===0){
        
    }
}
</script>

<style lang="scss" scoped>
.single {
    width: var(--single-width, 100px);
    height: var(--single-width, 100px);
    border-radius: 50%;
    /* border: solid 1px black; */
    position: relative;
}

.main {
    //background-color: rgb(20, 20, 19);
    display: flex;
    //height: 350px;
    //height: 100;
    justify-content: space-between;
    flex-direction: row;
    //
    //transform: rotate(90deg);
    //transform: translateY(0);

}

.single::after {
    content: "";
    width: var(--single - width);
    height: var(--single - width);
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(100% * 0.5 100% * 0.1666,
            100% * 0.8 100% * 0.5,
            100% * 0.7 100% * 0.58,
            100% * 0.57 100% * 0.45,
            100% * 0.57 100% * 0.83,
            100% * 0.43 100% * 0.83,
            100% * 0.43 100% * 0.45,
            100% * 0.3 100% * 0.58,
            100% * 0.2 100% * 0.5);

    background-color: white;
    


}
</style>